<!DOCTYPE html>
<html>
<head hexo-theme='https://volantis.js.org/#3.0-beta2'>
  <meta charset="utf-8">
  <!-- SEO相关 -->
  
    
  
  <!-- 渲染优化 -->
  <meta name="renderer" content="webkit">
  <meta name="force-rendering" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="HandheldFriendly" content="True" >
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <!-- 页面元数据 -->
  
  <title>Grid 网格布局 - 河豚吞吞</title>
  
    <meta name="keywords" content="CSS">
  

  
    <meta name="description" content="Every obstacle is an opportunity.">
  

  <!-- feed -->
  

  <!-- import meta -->
  
    
      <meta name="msapplication-TileColor" content="#ffffff">
    
      <meta name="msapplication-config" content="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    
      <meta name="theme-color" content="#ffffff">
    
  

  <!-- link -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13/css/all.min.css">
  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">


  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css">

  

  

  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
  

  

  <!-- import link -->
  
  
  <link rel="apple-touch-icon" sizes="180x180" href="/lemonElf/img/icon/icon001.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/lemonElf/img/icon/icon001.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/lemonElf/img/icon/icon001.png">
  <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
  <link rel="mask-icon" href="/lemonElf/img/icon/icon001.png" color="#5bbad5">
  <link rel="shortcut icon" href="/lemonElf/img/icon/icon001.png">
  

  
  
    
<link rel="stylesheet" href="/lemonelf/css/style.css">

  

  
  
</head>

<body>
  
  
  
  <div class="cover-wrapper">
    <cover class='cover post' style="display: none;">
      <div class='cover-body'>
  <div class='a'>
    
    
      <p class="title">MissGlobeFish</p>
    
    
      <p class="subtitle">When the world turns its back on you, you turn your back on the world! And only embrace whats next!</p>
    
  </div>
  <div class='b'>
    <div class='menu navigation dock'>
      <div class='list-h'>
        
          
            <a href="/lemonelf/"
              
              
              id="lemonelf">
              <img src='https://i.loli.net/2020/07/24/skczZ1VdMGRbTLi.png'><p>主页</p>
            </a>
          
            <a href="/lemonelf/archives/"
              
              
              id="lemonelfarchives">
              <img src='https://i.loli.net/2020/07/24/GaeXvVAdtJkCYT3.png'><p>归档</p>
            </a>
          
            <a href="/lemonelf/categories/"
              
              
              id="lemonelfcategories">
              <img src='https://i.loli.net/2020/07/24/9kHJZNA8m4RBxhp.png'><p>分类</p>
            </a>
          
            <a href="/lemonelf/friends/"
              
              
              id="lemonelffriends">
              <img src='https://i.loli.net/2020/07/24/cxRslyWzk2OTP9r.png'><p>友链</p>
            </a>
          
        
      </div>
    </div>
  </div>
</div>

      <div class="scroll-down" style="display: none;"><i class="fa fa-chevron-down scroll-down-effects"></i></div>
    </cover>
    <header class="l_header shadow blur">
  <div class='container'>
  <div class='wrapper'>
    <div class='nav-sub'>
      <p class="title"></p>
      <ul class='switcher nav-list-h' id="pjax-header-nav-list">
        <li><a class="s-comment fas fa-comments fa-fw" target="_self" href='javascript:void(0)'></a></li>
        
          <li><a class="s-toc fas fa-list fa-fw" target="_self" href='javascript:void(0)'></a></li>
        
      </ul>
    </div>
		<div class="nav-main">
      
        
        <a class="title flat-box" target="_self" href='/lemonelf/'>
          
          
          
            MissGlobeFish
          
        </a>
      

			<div class='menu navigation'>
				<ul class='nav-list-h'>
          
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/categories/
                  
                  
                  
                    id="lemonelfcategories"
                  >
                  <i class='fas fa-folder-open fa-fw'></i>分类
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/tags/
                  
                  
                  
                    id="lemonelftags"
                  >
                  <i class='fas fa-tags fa-fw'></i>标签
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/archives/
                  
                  
                  
                    id="lemonelfarchives"
                  >
                  <i class='fas fa-archive fa-fw'></i>归档
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/friends/
                  
                  
                  
                    id="lemonelffriends"
                  >
                  <i class='fas fa-link fa-fw'></i>友链
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/about/
                  
                  
                  
                    id="lemonelfabout"
                  >
                  <i class='fas fa-info-circle fa-fw'></i>关于
                </a>
                
              </li>
            
          
          
				</ul>
			</div>

      <div class="m_search">
        <form name="searchform" class="form u-search-form">
          <i class="icon fas fa-search fa-fw"></i>
          <input type="text" class="input u-search-input" placeholder="Search..." />
        </form>
      </div>

			<ul class='switcher nav-list-h'>
				
					<li><a class="s-search fas fa-search fa-fw" target="_self" href='javascript:void(0)'></a></li>
				
				<li>
          <a class="s-menu fas fa-bars fa-fw" target="_self" href='javascript:void(0)'></a>
          <ul class="menu-phone list-v navigation white-box">
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/categories/
                  
                  
                  
                    id="lemonelfcategories"
                  >
                  <i class='fas fa-folder-open fa-fw'></i>分类
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/tags/
                  
                  
                  
                    id="lemonelftags"
                  >
                  <i class='fas fa-tags fa-fw'></i>标签
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/archives/
                  
                  
                  
                    id="lemonelfarchives"
                  >
                  <i class='fas fa-archive fa-fw'></i>归档
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/friends/
                  
                  
                  
                    id="lemonelffriends"
                  >
                  <i class='fas fa-link fa-fw'></i>友链
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/about/
                  
                  
                  
                    id="lemonelfabout"
                  >
                  <i class='fas fa-info-circle fa-fw'></i>关于
                </a>
                
              </li>
            
          
            
          </ul>
        </li>
			</ul>
		</div>
	</div>
  </div>
</header>

  </div>
  


  <div class="l_body nocover">
    <div class='body-wrapper' id="pjax-container">
      
        <!--此文件用来存放一些不方便取值的变量-->
<!--思路大概是将值藏到重加载的区域内-->



<div id="pjax-data" style="display: none">
  <div id="pjax-ispage">true</div>
  <div id="pjax-pageTitle">Grid 网格布局</div>
  <div id="pjax-enable-cover">true</div>
  <div id="pjax-permalink">https://missglobefish.gitee.io/lemonelf/2020/08/13/Grid%20%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/</div>
  
  <div id="valine-path">none</div>
  <div id="valine-placeholder">none</div>
  
  
</div>


<script>
  // 处理封面 此时 jquery 还没加载
  if ("none" == "none") { // 移除封面
    document.getElementsByClassName('cover')[0].style.display = "none";
    document.getElementsByClassName('l_body')[0].classList.add("nocover");
    document.getElementsByClassName('l_header', 'cover-wrapper')[0].classList.add("show");
  } else {
    if ("none" == "blog") { // 半屏
      document.getElementsByClassName('cover')[0].classList.remove("full");
      document.getElementsByClassName('cover')[0].classList.add("half");
      document.getElementsByClassName('scroll-down')[0].style.display = "none";
    } else if ("none" == "docs") { // 全屏
      document.getElementsByClassName('cover')[0].classList.remove("half");
      document.getElementsByClassName('cover')[0].classList.add("full");
      document.getElementsByClassName('scroll-down')[0].style.display = "";
    }
    document.getElementsByClassName('cover')[0].style.display = "";
    document.getElementsByClassName('l_body', 'show')[0].classList.remove("nocover");
    document.getElementsByClassName('l_header', 'cover-wrapper')[0].classList.remove("show");
  }
</script>

      
      

<div class='l_main'>
  

  
    <article id="post" class="post white-box reveal shadow article-type-post" itemscope itemprop="blogPost">
      


  <section class='meta'>
    
      
      
        <a title='Grid 网格布局' href='/lemonelf/2020/08/13/Grid%20%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/'><img class='thumbnail' src='https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png'></a>
      
      <div class="meta" id="header-meta">
        
          
  <h1 class="title">
    <a href="/lemonelf/2020/08/13/Grid%20%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/">
      Grid 网格布局
    </a>
  </h1>


        
        <div class='new-meta-box'>
          
            
          
            
              
<div class='new-meta-item author'>
  <a class='author' href="/" rel="nofollow">
    <img no-lazy src="https://pic4.zhimg.com/80/v2-52584915d42d676148e2c302f4e87382_hd.jpg">
    <p>MissGlobeFish</p>
  </a>
</div>

            
          
            
              
  
  <div class='new-meta-item category'>
    <a href='/lemonelf/categories/CSS/' rel="nofollow">
      <i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>
      <p>CSS</p>
    </a>
  </div>


            
          
            
              <div class="new-meta-item date">
  <a class='notlink'>
    <i class="fas fa-calendar-alt fa-fw" aria-hidden="true"></i>
    <p>发布于：2020-08-13</p>
  </a>
</div>

            
          
            
              

            
          
        </div>
        
          <hr>
        
      </div>
    
  </section>


      <section class="article typo">
        <div class="article-entry" itemprop="articleBody">
          
          
          <p>Every obstacle is an opportunity.</p>
<a id="more"></a>

<blockquote>
<p><strong>Grid 网格布局</strong></p>
</blockquote>
<p><img src="/lemonElf/img/studyImg/css01.png" alt="css01"></p>
<p>上图这样的布局，就是 <code>Grid</code> 布局的拿手好戏。</p>
<p><code>Grid</code> 布局与 <code>Flex</code> 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。<br><code>Flex</code> 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。<br><code>Grid</code> 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。<br><code>Grid</code> 布局远比 <code>Flex</code> 布局强大。</p>
<blockquote>
<p><strong>A. 容器属性</strong></p>
</blockquote>
<p><code>Grid</code> 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。</p>
<p>这部分先介绍容器属性。</p>
<h5 id="1-display-属性"><a href="#1-display-属性" class="headerlink" title="1. display 属性"></a>1. display 属性</h5><p><code>display: grid</code> 指定一个容器采用网格布局。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">div &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>默认情况下，容器元素都是块级元素，但也可以设成行内元素。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">div &#123;</span><br><span class="line">  display: inline-grid;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>【 注意 】设为网格布局以后，容器子元素（ 项目 ）的 <code>float</code>、<code>display: inline-block</code>、<code>display: table-cell</code>、<code>vertical-align</code> 和 <code>column-*</code> 等设置都将失效。</p>
<h3 id="2-grid-template-columns-属性-amp-amp-grid-template-rows-属性"><a href="#2-grid-template-columns-属性-amp-amp-grid-template-rows-属性" class="headerlink" title="2. grid-template-columns 属性 &amp;&amp; grid-template-rows 属性"></a>2. grid-template-columns 属性 &amp;&amp; grid-template-rows 属性</h3><p>容器指定了网格布局以后，接着就要划分行和列。<br><code>grid-template-columns</code> 属性定义每一列的列宽，<code>grid-template-rows</code> 属性定义每一行的行高。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-template-columns: 100px 100px 100px;</span><br><span class="line">  grid-template-rows: 100px 100px 100px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>上面代码指定了一个三行三列的网格，列宽和行高都是 <code>100px</code>。</p>
<p><img src="/lemonElf/img/studyImg/css02.png" alt="css02"></p>
<p>除了使用绝对单位，也可以使用百分比。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-template-columns: 33.33% 33.33% 33.33%;</span><br><span class="line">  grid-template-rows: 33.33% 33.33% 33.33%;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="2-1-repeat"><a href="#2-1-repeat" class="headerlink" title="2.1 repeat()"></a>2.1 repeat()</h5><p>有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用 <code>repeat()</code> 函数，简化重复的值。<br>上面的代码用 <code>repeat()</code> 改写如下。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-template-columns: repeat(3, 33.33%);</span><br><span class="line">  grid-template-rows: repeat(3, 33.33%);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>repeat()</code> 接受两个参数，第一个参数是重复的次数（ 上例是 3 ），第二个参数是所要重复的值。</p>
<p><code>repeat()</code> 重复某种模式也是可以的。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grid-template-columns: repeat(2, 100px 20px 80px);</span><br></pre></td></tr></table></figure>

<p>上面代码定义了 <code>6</code> 列，第一列和第四列的宽度为 <code>100px</code>，第二列和第五列为 <code>20px</code>，第三列和第六列为 <code>80px</code>。</p>
<p><img src="/lemonElf/img/studyImg/css03.png" alt="css03"></p>
<h5 id="2-2-auto-fill-关键字"><a href="#2-2-auto-fill-关键字" class="headerlink" title="2.2 auto-fill 关键字"></a>2.2 auto-fill 关键字</h5><p>有时，单元格的大小是固定的，但是容器的大小不确定。<br>如果希望每一行（ 或每一列 ）容纳尽可能多的单元格，这时可以使用 <code>auto-fill</code> 关键字表示自动填充。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-template-columns: repeat(auto-fill, 100px);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>上面代码表示每列宽度 <code>100px</code>，然后自动填充，直到容器不能放置更多的列。</p>
<p><img src="/lemonElf/img/studyImg/css04.png" alt="css04"></p>
<h5 id="2-3-fr-关键字"><a href="#2-3-fr-关键字" class="headerlink" title="2.3 fr 关键字"></a>2.3 fr 关键字</h5><p>为了方便表示比例关系，网格布局提供了 <code>fr</code> 关键字（ fraction 的缩写，意为”片段” ）。<br>如果两列的宽度分别为 <code>1fr</code> 和 <code>2fr</code> ，就表示后者是前者的两倍。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-template-columns: 1fr 1fr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>上面代码表示两个相同宽度的列。</p>
<p><img src="/lemonElf/img/studyImg/css05.png" alt="css05"></p>
<p><code>fr</code> 可以与绝对长度的单位结合使用，这时会非常方便。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-template-columns: 150px 1fr 2fr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>上面代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。</p>
<p><img src="/lemonElf/img/studyImg/css06.png" alt="css06"></p>
<h5 id="2-4-minmax"><a href="#2-4-minmax" class="headerlink" title="2.4 minmax()"></a>2.4 minmax()</h5><p><code>minmax()</code> 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grid-template-columns: 1fr 1fr minmax(100px, 1fr);</span><br></pre></td></tr></table></figure>

<p>上面代码中，<code>minmax(100px, 1fr)</code> 表示列宽不小于 <code>100px</code>，不大于 <code>1fr</code>。</p>
<h5 id="2-5-auto-关键字"><a href="#2-5-auto-关键字" class="headerlink" title="2.5 auto 关键字"></a>2.5 auto 关键字</h5><p><code>auto</code> 关键字表示由浏览器自己决定长度。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grid-template-columns: 100px auto 100px;</span><br></pre></td></tr></table></figure>

<p>上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了 <code>min-width</code>，且这个值大于最大宽度。</p>
<h5 id="2-6-网格线的名称"><a href="#2-6-网格线的名称" class="headerlink" title="2.6 网格线的名称"></a>2.6 网格线的名称</h5><p><code>grid-template-columns</code> 属性和 <code>grid-template-rows</code> 属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];</span><br><span class="line">  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>上面代码指定网格布局为 3 行 x 3 列，因此有 4 根垂直网格线和 4 根水平网格线。方括号里面依次是这八根线的名字。</p>
<p>网格布局允许同一根线有多个名字，比如 <code>[fifth-line row-5]</code>。</p>
<h5 id="2-7-布局实例"><a href="#2-7-布局实例" class="headerlink" title="2.7 布局实例"></a>2.7 布局实例</h5><p><code>grid-template-columns</code> 属性对于网页布局非常有用。两栏式布局只需要一行代码。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.wrapper &#123;</span><br><span class="line">  display: grid;</span><br><span class="line">  grid-template-columns: 70% 30%;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>上面代码将左边栏设为 70%，右边栏设为 30%。</p>
<p>传统的十二网格布局，写起来也很容易。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">grid-template-columns: repeat(12, 1fr);</span><br></pre></td></tr></table></figure>

<h3 id="3-grid-row-gap-属性，grid-column-gap-属性，grid-gap-属性"><a href="#3-grid-row-gap-属性，grid-column-gap-属性，grid-gap-属性" class="headerlink" title="3. grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性"></a>3. grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性</h3><p><code>grid-row-gap</code> 属性设置行与行的间隔（行间距），<code>grid-column-gap</code> 属性设置列与列的间隔（列间距）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">  grid-row-gap: 20px;</span><br><span class="line">  grid-column-gap: 20px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>上面代码中，<code>grid-row-gap</code> 用于设置行间距，<code>grid-column-gap</code> 用于设置列间距。</p>
<p><img src="/lemonElf/img/studyImg/css07.png" alt="css07"></p>
<p><code>grid-gap</code> 属性是 <code>grid-column-gap</code> 和 <code>grid-row-gap</code> 的合并简写形式，语法如下。</p>
<p><code>grid-gap: &lt;grid-row-gap&gt; &lt;grid-column-gap&gt;;</code></p>
<p>因此，上面一段 CSS 代码等同于下面的代码。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">  grid-gap: 20px 20px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>如果 <code>grid-gap</code> 省略了第二个值，浏览器认为第二个值等于第一个值。</p>
<p>【 注意 】根据最新标准，上面三个属性名的 <code>grid-</code> 前缀已经删除，<code>grid-column-gap</code> 和 <code>grid-row-gap</code> 写成 <code>column-gap</code> 和 <code>row-gap</code>，<code>grid-gap</code> 写成 <code>gap</code>。</p>
<h3 id="4-grid-template-areas-属性"><a href="#4-grid-template-areas-属性" class="headerlink" title="4. grid-template-areas 属性"></a>4. grid-template-areas 属性</h3><p>网格布局允许指定” 区域 “（ area ），一个区域由单个或多个单元格组成。<code>grid-template-areas</code> 属性用于定义区域。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">    display: grid;</span><br><span class="line">    grid-template-columns: 100px 100px 100px;</span><br><span class="line">    grid-template-rows: 100px 100px 100px;</span><br><span class="line">    grid-template-areas: &#39;a b c&#39;</span><br><span class="line">                         &#39;d e f&#39;</span><br><span class="line">                         &#39;g h i&#39;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码先划分出 9 个单元格，然后将其定名为 <code>a</code> 到 <code>i</code> 的九个区域，分别对应这九个单元格。</p>
<p>多个单元格合并成一个区域的写法如下。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">grid-template-areas: &#39;a a a&#39;</span><br><span class="line">                     &#39;b b b&#39;</span><br><span class="line">                     &#39;c c c&#39;;</span><br></pre></td></tr></table></figure>
<p>上面代码将 9 个单元格分成 <code>a</code>、<code>b</code>、<code>c</code> 三个区域。</p>
<p>下面是一个布局实例。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">grid-template-areas: &quot;header header header&quot;</span><br><span class="line">                     &quot;main main sidebar&quot;</span><br><span class="line">                     &quot;footer footer footer&quot;;</span><br></pre></td></tr></table></figure>
<p>上面代码中，顶部是页眉区域 <code>header</code>，底部是页脚区域 <code>footer</code>，中间部分则为 <code>main</code> 和 <code>sidebar</code>。</p>
<p>如果某些区域不需要利用，则使用” 点 “（ <code>.</code> ）表示。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">grid-template-areas: &#39;a . c&#39;</span><br><span class="line">                     &#39;d . f&#39;</span><br><span class="line">                     &#39;g . i&#39;;</span><br></pre></td></tr></table></figure>
<p>上面代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域。</p>
<p>【 注意 】区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名 <code>-start</code>，终止网格线自动命名为区域名 <code>-end</code>。</p>
<p>【 比如 】区域名为 <code>header</code>，则起始位置的水平网格线和垂直网格线叫做 <code>header-start</code>，终止位置的水平网格线和垂直网格线叫做 <code>header-end</code>。</p>
<h3 id="5-grid-auto-flow-属性"><a href="#5-grid-auto-flow-属性" class="headerlink" title="5. grid-auto-flow 属性"></a>5. grid-auto-flow 属性</h3><p>划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行，即下图数字的顺序。</p>
<p><img src="/lemonElf/img/studyImg/css02.png" alt="css02"></p>
<p>这个顺序由 <code>grid-auto-flow</code> 属性决定，默认值是 <code>row</code>，即” 先行后列 “。<br>也可以将它设成 <code>column</code>，变成” 先列后行 “。</p>
<p><code>grid-auto-flow: column;</code></p>
<p>上面代码设置了 <code>column</code> 以后，放置顺序就变成了下图。</p>
<p><img src="/lemonElf/img/studyImg/css08.png" alt="css08"></p>
<p><code>grid-auto-flow</code> 属性除了设置成 <code>row</code> 和 <code>column</code> ，还可以设成 <code>row dense</code> 和 <code>column dense</code>。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。</p>
<p>下面的例子让 1 号项目和 2 号项目各占据两个单元格，然后在默认的 <code>grid-auto-flow: row</code> 情况下，会产生下面这样的布局。</p>
<p><img src="/lemonElf/img/studyImg/css09.png" alt="css09"></p>
<p>上图中，1 号项目后面的位置是空的，这是因为 3 号项目默认跟着 2 号项目，所以会排在 2 号项目后面。</p>
<p>现在修改设置，设为 <code>row dense</code>，表示” 先行后列 “，并且尽可能紧密填满，尽量不出现空格。</p>
<p><code>grid-auto-flow: row dense;</code></p>
<p>上面代码的效果如下。</p>
<p><img src="/lemonElf/img/studyImg/css10.png" alt="css10"></p>
<p>上图会先填满第一行，再填满第二行，所以3号项目就会紧跟在 1 号项目的后面。8 号项目和 9 号项目就会排到第四行。</p>
<p>如果将设置改为 <code>column dense</code>，表示” 先列后行 “，并且尽量填满空格。</p>
<p><code>grid-auto-flow: column dense;</code></p>
<p>上面代码的效果如下。</p>
<p><img src="/lemonElf/img/studyImg/css11.png" alt="css11"></p>
<p>上图会先填满第一列，再填满第 2 列，所以 3 号项目在第一列，4 号项目在第二列。8 号项目和 9 号项目被挤到了第四列。</p>
<h3 id="6-justify-items-属性，align-items-属性，place-items-属性"><a href="#6-justify-items-属性，align-items-属性，place-items-属性" class="headerlink" title="6. justify-items 属性，align-items 属性，place-items 属性"></a>6. justify-items 属性，align-items 属性，place-items 属性</h3><p><code>justify-items</code> 属性设置单元格内容的水平位置（ 左中右 ），<code>align-items</code> 属性设置单元格内容的垂直位置（上中下）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">    justify-items: start | end | center | stretch;</span><br><span class="line">    align-items: start | end | center | stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这两个属性的写法完全相同，都可以取下面这些值。</p>
<ol>
<li>start：对齐单元格的起始边缘。</li>
<li>end：对齐单元格的结束边缘。</li>
<li>center：单元格内部居中。</li>
<li>stretch：拉伸，占满单元格的整个宽度（默认值）。</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">    justify-items: start;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码表示，单元格的内容左对齐，效果如下图。</p>
<p><img src="/lemonElf/img/studyImg/css12.png" alt="css12"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">  align-items: start;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码表示，单元格的内容头部对齐，效果如下图。</p>
<p><img src="/lemonElf/img/studyImg/css13.png" alt="css13"></p>
<p><code>place-items</code> 属性是 <code>align-items</code> 属性和 <code>justify-items</code> 属性的合并简写形式。</p>
<p><code>place-items: &lt;align-items&gt; &lt;justify-items&gt;;</code></p>
<p>下面是一个例子。</p>
<p><code>place-items: start end;</code></p>
<p>如果省略第二个值，则浏览器认为与第一个值相等。</p>
<h3 id="7-justify-content-属性，align-content-属性，place-content-属性"><a href="#7-justify-content-属性，align-content-属性，place-content-属性" class="headerlink" title="7. justify-content 属性，align-content 属性，place-content 属性"></a>7. justify-content 属性，align-content 属性，place-content 属性</h3><p><code>justify-content</code> 属性是整个内容区域在容器里面的水平位置（ 左中右 ），<code>align-content</code> 属性是整个内容区域的垂直位置（ 上中下 ）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;</span><br><span class="line">    align-content: start | end | center | stretch | space-around | space-between | space-evenly;  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这两个属性的写法完全相同，都可以取下面这些值。<br>【 注意 】下面的图都以 <code>justify-content</code> 属性为例，<code>align-content</code> 属性的图完全一样，只是将水平方向改成垂直方向。</p>
<ol>
<li>start - 对齐容器的起始边框。</li>
</ol>
<p><img src="/lemonElf/img/studyImg/css14.png" alt="css14"></p>
<ol start="2">
<li>end - 对齐容器的结束边框。</li>
</ol>
<p><img src="/lemonElf/img/studyImg/css15.png" alt="css15"></p>
<ol start="3">
<li>center - 容器内部居中。</li>
</ol>
<p><img src="/lemonElf/img/studyImg/css16.png" alt="css16"></p>
<ol start="4">
<li>stretch - 项目大小没有指定时，拉伸占据整个网格容器。</li>
</ol>
<p><img src="/lemonElf/img/studyImg/css17.png" alt="css17"></p>
<ol start="5">
<li>space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。</li>
</ol>
<p><img src="/lemonElf/img/studyImg/css18.png" alt="css18"></p>
<ol start="6">
<li>space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。</li>
</ol>
<p><img src="/lemonElf/img/studyImg/css19.png" alt="css19"></p>
<ol start="7">
<li>space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。</li>
</ol>
<p><img src="/lemonElf/img/studyImg/css20.png" alt="css20"></p>
<p><code>place-content</code> 属性是 <code>align-content</code> 属性和 <code>justify-content</code> 属性的合并简写形式。</p>
<p><code>place-content: &lt;align-content&gt; &lt;justify-content&gt;</code></p>
<p>下面是一个例子。</p>
<p><code>place-content: space-around space-evenly;</code></p>
<p>如果省略第二个值，浏览器就会假定第二个值等于第一个值。</p>
<h3 id="8-grid-auto-columns-属性，grid-auto-rows-属性"><a href="#8-grid-auto-columns-属性，grid-auto-rows-属性" class="headerlink" title="8. grid-auto-columns 属性，grid-auto-rows 属性"></a>8. grid-auto-columns 属性，grid-auto-rows 属性</h3><p>有时候，一些项目的指定位置，在现有网格的外部。比如网格只有 3 列，但是某一个项目指定在第 5 行。这时，浏览器会自动生成多余的网格，以便放置项目。</p>
<p><code>grid-auto-columns</code> 属性和 <code>grid-auto-rows</code> 属性用来设置，浏览器自动创建的多余网格的列宽和行高。<br>它们的写法与 <code>grid-template-columns</code> 和 <code>grid-template-rows</code> 完全相同。<br>如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。</p>
<p>下面的例子里面，划分好的网格是 3 行 x 3 列，但是，8 号项目指定在第 4 行，9 号项目指定在第 5 行。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.container &#123;</span><br><span class="line">    display: grid;</span><br><span class="line">    grid-template-columns: 100px 100px 100px;</span><br><span class="line">    grid-template-rows: 100px 100px 100px;</span><br><span class="line">    grid-auto-rows: 50px; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码指定新增的行高统一为 50px（ 原始的行高为 100px ）。</p>
<p><img src="/lemonElf/img/studyImg/css21.png" alt="css21"></p>
<h3 id="9-grid-template-属性，grid-属性"><a href="#9-grid-template-属性，grid-属性" class="headerlink" title="9. grid-template 属性，grid 属性"></a>9. grid-template 属性，grid 属性</h3><p><code>grid-template</code> 属性是 <code>grid-template-columns</code>、<code>grid-template-rows</code> 和 <code>grid-template-areas</code> 这三个属性的合并简写形式。</p>
<p><code>grid</code> 属性是 <code>grid-template-rows</code>、<code>grid-template-columns</code>、<code>grid-template-areas</code>、 <code>grid-auto-rows</code>、<code>grid-auto-columns</code>、<code>grid-auto-flow</code> 这六个属性的合并简写形式。</p>
<p>从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。</p>
<blockquote>
<p><strong>B. 项目属性</strong></p>
</blockquote>
<p>下面这些属性定义在项目上面。</p>
<h3 id="1-grid-column-start-属性，grid-column-end-属性，grid-row-start-属性，grid-row-end-属性"><a href="#1-grid-column-start-属性，grid-column-end-属性，grid-row-start-属性，grid-row-end-属性" class="headerlink" title="1. grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性"></a>1. grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性</h3><p>项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。</p>
<ol>
<li>grid-column-start 属性：左边框所在的垂直网格线</li>
<li>grid-column-end 属性：右边框所在的垂直网格线</li>
<li>grid-row-start 属性：上边框所在的水平网格线</li>
<li>grid-row-end 属性：下边框所在的水平网格线<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.item-1 &#123;</span><br><span class="line">    grid-column-start: 2;</span><br><span class="line">    grid-column-end: 4;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
上面代码指定，1 号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。</li>
</ol>
<p><img src="/lemonElf/img/studyImg/css22.png" alt="css22"></p>
<p>上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。</p>
<p>除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的 <code>grid-auto-flow</code> 属性决定，这个属性的默认值是 <code>row</code>，因此会” 先行后列 “进行排列。<br>读者可以把这个属性的值分别改成 <code>column</code>、<code>row dense</code> 和 <code>column dense</code>，看看其他项目的位置发生了怎样的变化。</p>
<p>下面的例子是指定四个边框位置的效果。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.item-1 &#123;</span><br><span class="line">    grid-column-start: 1;</span><br><span class="line">    grid-column-end: 3;</span><br><span class="line">    grid-row-start: 2;</span><br><span class="line">    grid-row-end: 4;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="/lemonElf/img/studyImg/css23.png" alt="css23"></p>
<p>这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.item-1 &#123;</span><br><span class="line">  grid-column-start: header-start;</span><br><span class="line">  grid-column-end: header-end;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码中，左边框和右边框的位置，都指定为网格线的名字。</p>
<p>这四个属性的值还可以使用 <code>span</code> 关键字，表示” 跨越 “，即左右边框（ 上下边框 ）之间跨越多少个网格。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item-1 &#123;</span><br><span class="line">  grid-column-start: span 2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码表示，1号项目的左边框距离右边框跨越2个网格。</p>
<p><img src="/lemonElf/img/studyImg/css24.png" alt="css24"></p>
<p>这与下面的代码效果完全一样。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item-1 &#123;</span><br><span class="line">  grid-column-end: span 2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>使用这四个属性，如果产生了项目的重叠，则使用  <code>z-index</code> 属性指定项目的重叠顺序。</p>
<h3 id="2-grid-column-属性，grid-row-属性"><a href="#2-grid-column-属性，grid-row-属性" class="headerlink" title="2. grid-column 属性，grid-row 属性"></a>2. grid-column 属性，grid-row 属性</h3><p><code>grid-column</code> 属性是 <code>grid-column-start</code> 和 <code>grid-column-end</code> 的合并简写形式，<code>grid-row</code> 属性是 <code>grid-row-start</code> 属性和 <code>grid-row-end</code> 的合并简写形式。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.item &#123;</span><br><span class="line">  grid-column:  &#x2F; ;</span><br><span class="line">  grid-row:  &#x2F; ;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>下面是一个例子。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">.item-1 &#123;</span><br><span class="line">  grid-column: 1 &#x2F; 3;</span><br><span class="line">  grid-row: 1 &#x2F; 2;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;* 等同于 *&#x2F;</span><br><span class="line">.item-1 &#123;</span><br><span class="line">  grid-column-start: 1;</span><br><span class="line">  grid-column-end: 3;</span><br><span class="line">  grid-row-start: 1;</span><br><span class="line">  grid-row-end: 2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码中，项目 <code>item-1</code> 占据第一行，从第一根列线到第三根列线。</p>
<p>这两个属性之中，也可以使用 <code>span</code> 关键字，表示跨越多少个网格。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">.item-1 &#123;</span><br><span class="line">  background: #b03532;</span><br><span class="line">  grid-column: 1 &#x2F; 3;</span><br><span class="line">  grid-row: 1 &#x2F; 3;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;* 等同于 *&#x2F;</span><br><span class="line">.item-1 &#123;</span><br><span class="line">  background: #b03532;</span><br><span class="line">  grid-column: 1 &#x2F; span 2;</span><br><span class="line">  grid-row: 1 &#x2F; span 2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码中，项目 <code>item-1</code> 占据的区域，包括第一行 + 第二行、第一列 + 第二列。</p>
<p><img src="/lemonElf/img/studyImg/css25.png" alt="css25"></p>
<p>斜杠以及后面的部分可以省略，默认跨越一个网格。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.item-1 &#123;</span><br><span class="line">  grid-column: 1;</span><br><span class="line">  grid-row: 1;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码中，项目 <code>item-1</code> 占据左上角第一个网格。</p>
<h3 id="3-grid-area-属性"><a href="#3-grid-area-属性" class="headerlink" title="3. grid-area 属性"></a>3. grid-area 属性</h3><p><code>grid-area</code> 属性指定项目放在哪一个区域。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item-1 &#123;</span><br><span class="line">  grid-area: e;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>上面代码中，1号项目位于 <code>e</code> 区域，效果如下图。</p>
<p><img src="/lemonElf/img/studyImg/css26.png" alt="css26"></p>
<p><code>grid-area</code> 属性还可用作 <code>grid-row-start</code>、<code>grid-column-start</code>、<code>grid-row-end</code>、<code>grid-column-end</code> 的合并简写形式，直接指定项目的位置。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item &#123;</span><br><span class="line">  grid-area: &lt;row-start&gt; &#x2F; &lt;column-start&gt; &#x2F; &lt;row-end&gt; &#x2F; &lt;column-end&gt;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>下面是一个例子。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item-1 &#123;</span><br><span class="line">  grid-area: 1 &#x2F; 1 &#x2F; 3 &#x2F; 3;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-justify-self-属性，align-self-属性，place-self-属性"><a href="#4-justify-self-属性，align-self-属性，place-self-属性" class="headerlink" title="4. justify-self 属性，align-self 属性，place-self 属性"></a>4. justify-self 属性，align-self 属性，place-self 属性</h3><p><code>justify-self</code> 属性设置单元格内容的水平位置（ 左中右 ），跟 <code>justify-items</code> 属性的用法完全一致，但只作用于单个项目。</p>
<p><code>align-self</code> 属性设置单元格内容的垂直位置（ 上中下 ），跟 <code>align-items</code> 属性的用法完全一致，也是只作用于单个项目。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.item &#123;</span><br><span class="line">  justify-self: start | end | center | stretch;</span><br><span class="line">  align-self: start | end | center | stretch;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这两个属性都可以取下面四个值。</p>
<ol>
<li>start：对齐单元格的起始边缘。</li>
<li>end：对齐单元格的结束边缘。</li>
<li>center：单元格内部居中。</li>
<li>stretch：拉伸，占满单元格的整个宽度（默认值）。</li>
</ol>
<p>下面是 <code>justify-self: start</code> 的例子。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.item-1  &#123;</span><br><span class="line">  justify-self: start;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><img src="/lemonElf/img/studyImg/css27.png" alt="css27"></p>
<p><code>place-self</code> 属性是 <code>align-self</code> 属性和 <code>justify-self</code> 属性的合并简写形式。</p>
<p><code>place-self: &lt;align-self&gt; &lt;justify-self&gt;;</code></p>
<p>下面是一个例子。</p>
<p><code>place-self: center center;</code></p>
<p>如果省略第二个值，<code>place-self</code> 属性会认为这两个值相等。</p>

          
            <div class='article_footer'>
              
                
  

  

  

  


              
            </div>
          
        </div>
        
          


  <section class='meta' id="footer-meta">
    <div class='new-meta-box'>
      
        
          <div class="new-meta-item date" itemprop="dateUpdated" datetime="2020-08-13T23:41:53+08:00">
  <a class='notlink'>
    <i class="fas fa-edit fa-fw" aria-hidden="true"></i>
    <p>更新于：2020-08-13</p>
  </a>
</div>

        
      
        
          
  
  <div class="new-meta-item meta-tags"><a class="tag" href="/lemonelf/tags/CSS/" rel="nofollow"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i><p>CSS</p></a></div>


        
      
        
          

        
      
        
          
  <div class="new-meta-item share -mob-share-list">
  <div class="-mob-share-list share-body">
    
      
        <a class="-mob-share-qq" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://missglobefish.gitee.io/lemonelf/2020/08/13/Grid%20%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/&title=Grid 网格布局 - 河豚吞吞&pics=https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png&summary=Every obstacle is an opportunity."
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png">
          
        </a>
      
    
      
        <a class="-mob-share-qzone" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://missglobefish.gitee.io/lemonelf/2020/08/13/Grid%20%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/&title=Grid 网格布局 - 河豚吞吞&pics=https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png&summary=Every obstacle is an opportunity."
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png">
          
        </a>
      
    
      
        <a class="-mob-share-weibo" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="http://service.weibo.com/share/share.php?url=https://missglobefish.gitee.io/lemonelf/2020/08/13/Grid%20%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/&title=Grid 网格布局 - 河豚吞吞&pics=https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png&summary=Every obstacle is an opportunity."
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png">
          
        </a>
      
    
  </div>
</div>



        
      
    </div>
  </section>


        
        
          <div class="prev-next">
            
              <a class='prev' href='/lemonelf/2020/08/13/HTTP%20%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85/'>
                <p class='title'><i class="fas fa-chevron-left" aria-hidden="true"></i>HTTP 学习之旅</p>
                <p class='content'>We make our own luck.


1. HTTP 的前世今生小结：

HTTP 协议始于三十年前蒂姆·伯纳斯 - 李的一篇论文；
HTTP/0.9 是个简单的文本协议，只能获取文本...</p>
              </a>
            
            
              <a class='next' href='/lemonelf/2020/08/13/CSS%20%E8%AF%AD%E6%B3%95/'>
                <p class='title'>CSS 语法<i class="fas fa-chevron-right" aria-hidden="true"></i></p>
                <p class='content'>除了属性和选择器，你还需要知道这些带 @ 的规则。
</p>
              </a>
            
          </div>
        
      </section>
    </article>
  




<!-- 根据页面mathjax变量决定是否加载MathJax数学公式js -->


</div>
<aside class='l_side'>
  
  

  
    
    



  <section class="widget toc-wrapper shadow desktop mobile" id="toc-div" >
    
  <header>
    
      <i class="fas fa-list fa-fw" aria-hidden="true"></i><span class='name'>本文目录</span>
    
  </header>


    <div class='content'>
        <ol class="toc"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-display-%E5%B1%9E%E6%80%A7"><span class="toc-text">1. display 属性</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-grid-template-columns-%E5%B1%9E%E6%80%A7-amp-amp-grid-template-rows-%E5%B1%9E%E6%80%A7"><span class="toc-text">2. grid-template-columns 属性 &amp;&amp; grid-template-rows 属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#2-1-repeat"><span class="toc-text">2.1 repeat()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-2-auto-fill-%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-text">2.2 auto-fill 关键字</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-3-fr-%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-text">2.3 fr 关键字</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-4-minmax"><span class="toc-text">2.4 minmax()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-5-auto-%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-text">2.5 auto 关键字</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-6-%E7%BD%91%E6%A0%BC%E7%BA%BF%E7%9A%84%E5%90%8D%E7%A7%B0"><span class="toc-text">2.6 网格线的名称</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-7-%E5%B8%83%E5%B1%80%E5%AE%9E%E4%BE%8B"><span class="toc-text">2.7 布局实例</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-grid-row-gap-%E5%B1%9E%E6%80%A7%EF%BC%8Cgrid-column-gap-%E5%B1%9E%E6%80%A7%EF%BC%8Cgrid-gap-%E5%B1%9E%E6%80%A7"><span class="toc-text">3. grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-grid-template-areas-%E5%B1%9E%E6%80%A7"><span class="toc-text">4. grid-template-areas 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-grid-auto-flow-%E5%B1%9E%E6%80%A7"><span class="toc-text">5. grid-auto-flow 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-justify-items-%E5%B1%9E%E6%80%A7%EF%BC%8Calign-items-%E5%B1%9E%E6%80%A7%EF%BC%8Cplace-items-%E5%B1%9E%E6%80%A7"><span class="toc-text">6. justify-items 属性，align-items 属性，place-items 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-justify-content-%E5%B1%9E%E6%80%A7%EF%BC%8Calign-content-%E5%B1%9E%E6%80%A7%EF%BC%8Cplace-content-%E5%B1%9E%E6%80%A7"><span class="toc-text">7. justify-content 属性，align-content 属性，place-content 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-grid-auto-columns-%E5%B1%9E%E6%80%A7%EF%BC%8Cgrid-auto-rows-%E5%B1%9E%E6%80%A7"><span class="toc-text">8. grid-auto-columns 属性，grid-auto-rows 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-grid-template-%E5%B1%9E%E6%80%A7%EF%BC%8Cgrid-%E5%B1%9E%E6%80%A7"><span class="toc-text">9. grid-template 属性，grid 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-grid-column-start-%E5%B1%9E%E6%80%A7%EF%BC%8Cgrid-column-end-%E5%B1%9E%E6%80%A7%EF%BC%8Cgrid-row-start-%E5%B1%9E%E6%80%A7%EF%BC%8Cgrid-row-end-%E5%B1%9E%E6%80%A7"><span class="toc-text">1. grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-grid-column-%E5%B1%9E%E6%80%A7%EF%BC%8Cgrid-row-%E5%B1%9E%E6%80%A7"><span class="toc-text">2. grid-column 属性，grid-row 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-grid-area-%E5%B1%9E%E6%80%A7"><span class="toc-text">3. grid-area 属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-justify-self-%E5%B1%9E%E6%80%A7%EF%BC%8Calign-self-%E5%B1%9E%E6%80%A7%EF%BC%8Cplace-self-%E5%B1%9E%E6%80%A7"><span class="toc-text">4. justify-self 属性，align-self 属性，place-self 属性</span></a>
    </div>
  </section>


  


</aside>



    </div>
    
  
  <footer class="clearfix">
    <br><br>
    
      
        <div class="aplayer-container">
          

  
    <meting-js
      theme='#1BCDFC'
      autoplay='false'
      volume='0.7'
      loop='all'
      order='list'
      fixed='false'
      list-max-height='320px'
      server='netease'
      type='playlist'
      id='3175833810'
      list-folded='true'>
    </meting-js>
  


        </div>
      
    
      
        <br>
        <div class="social-wrapper">
          
            
              <a href="https://missglobefish.github.io/"
                class="social fas fa-rss flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
            
              <a href="https://missglobefish.github.io/"
                class="social fas fa-envelope flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
            
              <a href="https://gitee.com/MissGlobeFish"
                class="social fab fa-github flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
            
              <a href="https://music.163.com/#/user/home?id=63035382"
                class="social fas fa-headphones-alt flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
        </div>
      
    
      
        <div><p>Blog content follows the <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en">Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) License</a></p>
</div>
      
    
      
        Use
        <a href="https://volantis.js.org/" target="_blank" class="codename">Volantis</a>
        as theme, total visits
          <span id="busuanzi_value_site_pv"><i class="fas fa-circle-notch fa-spin fa-fw" aria-hidden="true"></i></span>
          times
        
      
    
      
        <div class='copyright'>
        <p><a href="/">Copyright © 2017-2020 XXX</a></p>

        </div>
      
    
  </footer>


    <a class="s-top fas fa-arrow-up fa-fw" href='javascript:void(0)'></a>
  </div>
  <div>
    
      
  

  <div id="rightmenu-wrapper">
    <ul class="list-v rightmenu" id="rightmenu-content">
      <li class='option'>
        <a class='vlts-menu opt fix-cursor-default' id='menu-copy-text' onclick='document.execCommand("copy")'><i class='fa fa-copy fa-fw'></i>Copy Text</a>
        <hr id='hr-text'>
        <a class='vlts-menu opt fix-cursor-default' id='menu-copy-href'><i class='fa fa-link fa-fw'></i>Copy Link</a>
        <a class='vlts-menu opt fix-cursor-default' id='menu-open-href'><i class='fa fa-external-link-square-alt fa-fw'></i>Open Link in New Tab</a>
        <hr id='hr-href'>
        <a class='vlts-menu opt fix-cursor-default' id='menu-copy-src'><i class='fa fa-image fa-fw'></i>Copy Image Link</a>
        <hr id='hr-src'>
      </li>
      <li class='navigation'>
        <a class='nav icon-only fix-cursor-default' onclick='history.back()'><i class='fa fa-arrow-left fa-fw'></i></a>
        <a class='nav icon-only fix-cursor-default' onclick='history.forward()'><i class='fa fa-arrow-right fa-fw'></i></a>
        <a class='nav icon-only fix-cursor-default' onclick='window.location.reload()'><i class='fa fa-redo fa-fw'></i></a>
        <a class='nav icon-only fix-cursor-default' href='/'><i class='fa fa-home fa-fw'></i></a>
      </li>
      <hr>
      
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' href=https://gitee.com/MissGlobeFish/lemonElf
        
        
        
        
          id="https:giteecomMissGlobeFishlemonElf"
        >
        <i class='fas fa-envelope fa-fw'></i> 提出问题
      </a>
    </li>
  
        
      
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' href=https://missglobefish.github.io/
        
        
        
        
          id="https:missglobefishgithubio"
        >
        <i class='fa fa-fan fa-spin fa-fw'></i> 生活博客
      </a>
    </li>
  
        
      
        
          <hr>
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' href=https://gitee.com/MissGlobeFish/lemonElf
        
        
        
        
          id="https:giteecomMissGlobeFishlemonElf"
        >
        <i class='fa fa-code-branch fa-fw'></i> 本站源码
      </a>
    </li>
  
        
      
        
      
        
          <hr>
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' 
        
        
        
          onclick="document.execCommand('print')"
        
        >
        <i class='fa fa-print fa-fw'></i> 打印页面
      </a>
    </li>
  
        
      
        
          <hr>
        
      
        
          <li class='music name'>
            <p class='nav music-title fix-cursor-default'></p>
          </li>
          <li class='music ctrl'>
            <a class='nav icon-only backward fix-cursor-default' onclick='aplayerBackward()'><i class='fa fa-step-backward fa-fw'></i></a>
            <a class='nav icon-only toggle fix-cursor-default' onclick='aplayerToggle()'><i class='fa fa-play fa-fw'></i></a>
            <a class='nav icon-only forward fix-cursor-default' onclick='aplayerForward()'><i class='fa fa-step-forward fa-fw'></i></a>
          </li>
          <li class='music volume'>
            <a class='nav volume'>
              <div class="aplayer-volume-bar-wrap">
                <div class="aplayer-volume-bar fix-cursor-pointer">
                  <div class="aplayer-volume"></div>
                  <i class='left fa fa-volume-off fa-fw'></i>
                  <i class='right fa fa-volume-up fa-fw'></i>
                </div>
              </div>
            </a>
          </li>
        
      
    </ul>
  </div>

  <script>
    window.document.oncontextmenu = function (event) {
      if (event.ctrlKey) return true;
      if (/Android|webOS|BlackBerry/i.test(navigator.userAgent)) return true;
      return popMenu(event);
    };
    document.addEventListener("click", function (event) {
      var mymenu = document.getElementById('rightmenu-wrapper');
      mymenu.style.display = "none";
    });
    function popMenu(event) {
      var mymenu = document.getElementById('rightmenu-wrapper');
      var menuContent = document.getElementById('rightmenu-content');
      var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
      var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
      mymenu.style.left = event.clientX + "px"; // 获取鼠标位置
      mymenu.style.top = event.clientY + "px";
      mymenu.style.display = 'block';
      if (event.clientX * 2 > screenWidth) {
        menuContent.classList.add('left');
      } else {
        menuContent.classList.remove('left');
      }
      if (event.clientY * 2 > screenHeight) {
        menuContent.classList.add('top');
      } else {
        menuContent.classList.remove('top');
      }

      let hrText = document.getElementById('hr-text');
      let hrSrc = document.getElementById('hr-src');
      let hrHref = document.getElementById('hr-href');

      // 选中图片
      let copySrc = document.getElementById('menu-copy-src');
      if (copySrc != undefined) {
        if (event.target.currentSrc) {
          copySrc.style.display = 'block';
          copySrc.addEventListener("click", function (e) {
            copyString(event.target.currentSrc);
          },{once: true});
          hrSrc.style.display = 'block';
        } else {
          copySrc.style.display = 'none';
          hrSrc.style.display = 'none';
        }
      }

      // 选中按钮
      // 判断是不是按钮
      let href = '';
      if (event.path) {
        for (i = 0; i < event.path.length; i++) {
          if (event.path[i].href != undefined && event.path[i].href.length > 0) {
            href = event.path[i].href;
          }
        }
      }

      let copyText = document.getElementById('menu-copy-text');
      copyText.style.display = 'none';
      hrText.style.display = 'none';
      if (href.length == 0) {
        // 选中文本
        if (window.getSelection().toString()) {
          copyText.style.display = 'block';
          hrText.style.display = 'block';
        }
      }

      // 在新标签页打开
      let openHref = document.getElementById('menu-open-href');
      if (openHref != undefined) {
        if (href.length > 0) {
          openHref.style.display = 'block';
          openHref.addEventListener("click", function (e) {
            window.open(href);
          },{once: true});
          hrHref.style.display = 'block';
        } else {
          openHref.style.display = 'none';
          hrHref.style.display = 'none';
        }
      }
      // 复制链接
      let copyHref = document.getElementById('menu-copy-href');
      if (copyHref != undefined) {
        if (href.length > 0) {
          copyHref.style.display = 'block';
          copyHref.addEventListener("click", function (e) {
            copyString(href);
          },{once: true});
        } else {
          copyHref.style.display = 'none';
        }
      }

      // 有音乐播放器
      if (true == true) {
        // 如果有aplayer，初始化一下
      	try {
      		checkAPlayer();
          updateTitle();
      	} catch (error) {
      		console.log(error);
      	}
      }

      return false; // 该行代码确保系统自带的右键菜单不会被调出
    }
    function hideMenu() {
      document.getElementById('rightmenu-wrapper').style.display = 'none';
    }
    function copyString(str) {
      const input = document.createElement('input');
      input.setAttribute('readonly', 'readonly');
      document.body.appendChild(input);
      input.setAttribute('value', str);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
    }
    document.execCommand('click');
  </script>


    
    
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js"></script>



  <script>
    
    var SEARCH_SERVICE = "hexo" || "hexo";
    var ROOT = "/lemonelf/" || "/";
    if (!ROOT.endsWith('/')) ROOT += '/';
  </script>





  <script async src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>



  
  
  
    
<script src="https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js"></script>

    <script type="text/javascript">
      $(function(){
        var imgs=["https://gitee.com/wallpapers/minimalist/raw/master/2020/001.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/002.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/003.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/004.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/005.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/006.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/012.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/016.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/019.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/025.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/033.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/034.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/035.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/038.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/039.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/042.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/042.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/046.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/051.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/052.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/054.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/056.jpg"];
        if ('true' == 'true') {
          function shuffle(arr){
            /*From countercurrent-time*/
            var n = arr.length;
            while(n--) {
              var index = Math.floor(Math.random() * n);
              var temp = arr[index];
              arr[index] = arr[n];
              arr[n] = temp;
            }
          }
          shuffle(imgs);
        }
        if ('.cover') {
          $('.cover').backstretch(
            imgs,
          {
            duration: "20000",
            fade: "1500"
          });
        } else {
          $.backstretch(
            imgs,
          {
            duration: "20000",
            fade: "1500"
          });
        }
      });
    </script>
  



  <script>
    let APlayerController = new Object();
    APlayerController.id = '3175833810';  // 设定全局音乐播放ID
    APlayerController.volume = '0.7';
  </script>
  
    
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>

  
    
<script src="https://cdn.jsdelivr.net/npm/meting@2.0/dist/Meting.min.js"></script>

  




  
  
<script src="/lemonelf/js/valine.js"></script>


<script>
  var GUEST_INFO = ['nick', 'mail', 'link'];
  var meta = 'nick,mail,link'.split(',').filter(function (item) {
    return GUEST_INFO.indexOf(item) > -1
  });
  var REQUIRED_FIELDS = ['nick', 'mail', 'link'];
  var requiredFields = 'nick,mail'.split(',').filter(function (item) {
    return REQUIRED_FIELDS.indexOf(item) > -1
  });

  function emoji(path, idx, ext) {
    return path + "/" + path + "-" + idx + "." + ext;
  }

  var emojiMaps = {};
  for (var i = 1; i <= 54; i++) {
    emojiMaps['tieba-' + i] = emoji('tieba', i, 'png');
  }
  for (var i = 1; i <= 101; i++) {
    emojiMaps['qq-' + i] = emoji('qq', i, 'gif');
  }
  for (var i = 1; i <= 116; i++) {
    emojiMaps['aru-' + i] = emoji('aru', i, 'gif');
  }
  for (var i = 1; i <= 125; i++) {
    emojiMaps['twemoji-' + i] = emoji('twemoji', i, 'png');
  }
  for (var i = 1; i <= 4; i++) {
    emojiMaps['weibo-' + i] = emoji('weibo', i, 'png');
  }

  function pjax_valine() {
    var valinePath = $.trim($('#valine-path').text()) === "none" ?
            window.location.pathname : $.trim($('#valine-path').text());

    var valinePlaceholder = $.trim($('#valine-placeholder').text()) === "none" ?
            "快来评论吧~" : $.trim($('#valine-placeholder').text());

    var ALLPATH = '';
    if(ALLPATH != '') valinePath = ALLPATH;

    var valine = new Valine();
    valine.init({
      el: '#valine_container',
      meta: meta,
      placeholder: valinePlaceholder,
      path: valinePath,
      appId: "",
      appKey: "",
      pageSize: '10',
      avatar: 'robohash',
      lang: 'zh-cn',
      visitor: 'true',
      highlight: 'true',
      mathJax: 'false',
      enableQQ: 'true',
      requiredFields: requiredFields,
      emojiCDN: 'https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/valine/',
      emojiMaps: emojiMaps
    })
  }

  $(function () {
    pjax_valine();
  });
</script>




<!-- darkmodejs -->


<!-- 复制 -->

  <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
    var clipboard = new ClipboardJS('.btn-copy', {
        target: function (trigger) {
            return trigger.nextElementSibling
        }
    });
    function wait(callback, seconds) {
        var timelag = null;
        timelag = window.setTimeout(callback, seconds)
    }
    function pjax_initCopyCode() {
        var copyHtml = '';
        copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
        copyHtml += '<i class="fas fa-copy"></i><span>COPY</span>';
        copyHtml += '</button>';
        $(".highlight .code pre").before(copyHtml);
        $(".article pre code").before(copyHtml);
        clipboard.off('success').on('success', function (e) {
            let $btn = $(e.trigger);
            $btn.addClass('copied');
            let $icon = $($btn.find('i'));
            $icon.removeClass('fa-copy');
            $icon.addClass('fa-check-circle');
            let $span = $($btn.find('span'));
            $span[0].innerText = 'COPIED';
            wait(function () {
                $icon.removeClass('fa-check-circle');
                $icon.addClass('fa-copy');
                $span[0].innerText = 'COPY'
            }, 2000)
        });
        clipboard.off('error').on('error', function (e) {
            e.clearSelection();
            let $btn = $(e.trigger);
            $btn.addClass('copy-failed');
            let $icon = $($btn.find('i'));
            $icon.removeClass('fa-copy');
            $icon.addClass('fa-times-circle');
            let $span = $($btn.find('span'));
            $span[0].innerText = 'COPY FAILED';
            wait(function () {
                $icon.removeClass('fa-times-circle');
                $icon.addClass('fa-copy');
                $span[0].innerText = 'COPY'
            }, 2000)
        })
    }
    $(function () {
        pjax_initCopyCode()
    });
</script>


<!-- scrollreveal -->

<!-- ******************************** -->

<!-- fancybox -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
  function pjax_fancybox() {
    $(".article-entry").find("img").not('.inline').not('a img').each(function () { //渲染 fancybox
      var element = document.createElement("a"); // a 标签
      $(element).attr("class", "fancybox");
      $(element).attr("pjax-fancybox", "");  // 过滤 pjax
      $(element).attr("href", $(this).attr("src"));
      if ($(this).attr("data-original")) {
        $(element).attr("href", $(this).attr("data-original"));
      }
      $(element).attr("data-fancybox", "images");
      var caption = "";   // 描述信息
      if ($(this).attr('alt')) {  // 判断当前页面是否存在描述信息
        $(element).attr('data-caption', $(this).attr('alt'));
        caption = $(this).attr('alt');
      }
      var div = document.createElement("div");
      $(div).addClass("fancybox");
      $(this).wrap(div); // 最外层套 div ，其实主要作用还是 class 样式
      var span = document.createElement("span");
      $(span).addClass("image-caption");
      $(span).text(caption); // 加描述
      $(this).after(span);  // 再套一层描述
      $(this).wrap(element);  // 最后套 a 标签
    })
    $(".article-entry").find("img").fancybox({
      selector: '[data-fancybox="images"]',
      hash: false,
      loop: false,
      closeClick: true,
      helpers: {
        overlay: {closeClick: true}
      },
      buttons: [
        "zoom",
        "close"
      ]
    });
  };
  $(function () {
    pjax_fancybox();
  });
</script>

<!-- ******************************** -->


  
<script src="/lemonelf/js/app.js"></script>




  
    
<script src="/lemonelf/js/search.js"></script>

  



  <script defer src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js" data-pjax></script>



  
<script src="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js"></script>

  <script type="text/javascript">
    $(function () {
      Waves.attach('.flat-btn', ['waves-button']);
      Waves.attach('.float-btn', ['waves-button', 'waves-float']);
      Waves.attach('.float-btn-light', ['waves-button', 'waves-float', 'waves-light']);
      Waves.attach('.flat-box', ['waves-block']);
      Waves.attach('.float-box', ['waves-block', 'waves-float']);
      Waves.attach('.waves-image');
      Waves.init();
    });
  </script>



  
<script src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js"></script>







    
      


<script src="https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.min.js"></script>

<!-- 样式位于：source/css/_third-party/pjaxanimate.styl -->

<div class="pjax-animate">
  
    <script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>
    <div id="loading-bar-wrapper"><script>NProgress.configure({parent:"#loading-bar-wrapper",trickleSpeed: 100})</script></div>
    <script>
      window.ShowLoading = function() {
        NProgress.start();
      };
      window.HideLoading = function() {
        NProgress.done();
      }
    </script>
  
</div>

<script>
    var pjax;
    document.addEventListener('DOMContentLoaded', function () {
      pjax = new Pjax({
        elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([pjax-fancybox])',
        selectors: [
          "title",
          "#pjax-container",
          "#pjax-header-nav-list"
        ],
        cacheBust: false,   // url 地址追加时间戳，用以避免浏览器缓存
        timeout: 5000
      });
    });

    document.addEventListener('pjax:send', function (e) {
      window.stop(); // 相当于点击了浏览器的停止按钮

      try {
        var currentUrl = window.location.pathname;
        var targetUrl = e.triggerElement.href;
        var banUrl = [""];
        if (banUrl[0] != "") {
          banUrl.forEach(item => {
            if(currentUrl.indexOf(item) != -1 || targetUrl.indexOf(item) != -1) {
              window.location.href = targetUrl;
            }
          });
        }
      } catch (error) {}

      window.subData = null; // 移除标题（用于一二级导航栏切换处）
      $.fancybox.close();    // 关闭弹窗
      $('.nav-main').find('.list-v').not('.menu-phone').css("display","none"); // 移除小尾巴
      $('.menu-phone.list-v').css("display","none"); // 移除小尾巴
      $('.l_header .switcher .s-search').removeClass('active'); // 关闭移动端激活的搜索框
      $('.l_header').removeClass('z_search-open'); // 关闭移动端激活的搜索框
      $('.wrapper').removeClass('sub'); // 跳转页面时关闭二级导航

      $('.s-top').unbind('click');   // 解绑
      $('.menu a').unbind('click');  // 解绑
      $(window).unbind('resize');    // 解绑
      $(window).unbind('scroll');    // 解绑
      $(document).unbind('scroll');  // 解绑
      $(document).unbind('click');   // 解绑
      $('body').unbind('click');     // 解绑
      window.ShowLoading();
    });

    document.addEventListener('pjax:complete', function () {
      // 关于百度统计对 SPA 页面的处理：
      // 方案一：百度统计>管理>单页应用设置中，打开开启按钮即可对SPA进行统计。 https://tongji.baidu.com/web/help/article?id=324
      // 方案二：取消注释下列代码。 https://tongji.baidu.com/web/help/article?id=235
      // 

      // 关于谷歌统计对 SPA 页面的处理：
      // 当应用以动态方式加载内容并更新地址栏中的网址时，也应该更新通过 gtag.js 存储的网页网址。
      // https://developers.google.cn/analytics/devguides/collection/gtagjs/single-page-applications?hl=zh-cn
      

      $('.nav-main').find('.list-v').not('.menu-phone').removeAttr("style",""); // 移除小尾巴的移除
      $('.menu-phone.list-v').removeAttr("style",""); // 移除小尾巴的移除
      $('script[data-pjax], .pjax-reload script').each(function () {
        $(this).parent().append($(this).remove());
      });

      try{
        pjax_fancybox();
        
          
          if ('.cover') {
            $('.cover').backstretch("resize");
          } else {
            $.backstretch("resize");
          }
        
        
        
        
          pjax_initCopyCode();
        
        
          pjax_valine();
        
        
        
        
        
      } catch (e) {
        console.log(e);
      }
      window.HideLoading();
    });

    document.addEventListener('pjax:error', function (e) {
      window.HideLoading();
      window.location.href = e.triggerElement.href;
    });
</script>

    
  </div>
</body>
</html>
